<!-- 管理员:课程考核管理:成绩分析-课程考核成绩分布-详情 -->
<template><div style="width:100% !important;">
<div class="statisticsTitle">信息工程大学洛阳校区学员成绩分布情况</div>
<div class="statisticsTitle">{{ this.$route.params.title }}</div>
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
  <el-tab-pane :label="item.label" :name="item.label" v-for="(item, index) in statisticsTabs">
  <div class="clazz-desc">
    【课程编号】课程名称：【{{ item.code }}】{{ item.name }}
    <span class="seprator"></span>
    成绩类型：
    课下作业成绩 {{ item.score }}
    <span class="seprator small"></span>
    课堂测评成绩 {{ item.score }}
    <span class="seprator small"></span>
    课中考核成绩 {{ item.score }}
    <span class="seprator small"></span>
    期中考试成绩 {{ item.score }}
    <span class="seprator small"></span>
    总评成绩 {{ item.score }}
  </div>
  <div>
        <el-table
          :data="item.tableData"
          border
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
        >
          <el-table-column prop="guideitemrank" label="年级" align="center"></el-table-column>
          <el-table-column prop="guideitemname" label="专业【培养层次】" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="考试人数" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="学分" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="100-90" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="89-80" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="79-70" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="69-60" align="center"></el-table-column>
          <el-table-column prop="guideitemrank" label="59-0" align="center"></el-table-column>
        </el-table>
  </div>
  </el-tab-pane>
</el-tabs>
</div></template>
<script>
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      activeName: '',
      statisticsTabs: [{
        label: '课下作业成绩',
        code: '123456',
        name: '英语课',
        score: 80,
        tableData: [{guideitemname: '计算机应用【本科】'}]
      }]
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handleClick: function(tab, event) {
      console.log(tab, event);
    },
  }
};
</script>

<style lang="less" scoped>
</style>

<style lang="less" scoped>
@import "../../courseAssessmentScoped.less";
.statisticsTitle {
  margin: 15px 0 15px 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: @fontFamily;
  color: #004ca7;
}
.clazz-desc {
  margin: 5px 0 20px 0;
  font-size: 16px;
  font-weight: normal;
  font-family: @fontFamily;
  color: #004ca7;
  > .seprator {
    display: inline-block;
    width: 30px;
  }
  > .small {
    width: 15px;
  }
}
.el-tabs {
  > ::v-deep .el-tabs__header {
    > .el-tabs__nav-wrap {
      > .el-tabs__nav-scroll {
        > .el-tabs__nav {
          border-width: 0;
          > .el-tabs__item {
            background-color: #e9edf2;
            font-size: 16px;
            font-weight: bold;
            font-family: @fontFamily;
            padding: 5px 0 5px 0;
            height: 50px;
            width: 180px;
            text-align: center;
            margin: 0 15px 0 15px;
            border-top-left-radius: 9px;
            border-top-right-radius: 9px;
          }
          .el-tabs__item:last-child {
            margin-right: 0;
          }
          .el-tabs__item:first-child {
            margin-left: 0;
          }
          .el-tabs__item:hover {
          }
          .is-active {
            color: #ffffff;
            background-color: #004ca7;
          }
        }
      }
    }
  }
}
</style>